<script lang="ts" setup>
import {
  NModal,
  NForm,
  NFormItem,
  NInput,
  NSelect,
  NButton,
  type SelectOption,
  type FormInst,
  type FormRules,
  type FormItemRule,
} from "naive-ui";
import { ref } from "vue";
import type { CreateUser } from "@/typings/api";

const createForm = ref<null | FormInst>();

const isShowModal = ref(false);

const controlModal = (isShow: boolean) => {
  isShowModal.value = isShow;
};

const genderOptions: SelectOption[] = [
  { label: "男", value: 0 },
  { label: "女", value: 1 },
];

const createUserModelInit = {
  username: "",
  nickName: "",
  password: "",
  email: "",
  address: "",
  gender: 0,
  avatar: "",
};

const createUserModel = ref<CreateUser>({ ...createUserModelInit });

const formRules: Partial<Record<keyof CreateUser, FormItemRule | FormItemRule[]>> = {
  username: {
    required: true,
    message: "用户名必填",
    trigger: ["blur", "change"],
  },
  password: {
    required: true,
    message: "密码必填",
    trigger: "blur",
  },
};

const handleReset = () => {
  console.log(createUserModelInit, "init");
  createUserModel.value = { ...createUserModelInit };
};

const handleSubmit = (event: MouseEvent) => {
  createForm.value?.validate((errors) => {
    if (errors) return;
  });
};

defineExpose({ controlModal });
</script>

<template>
  <NModal v-model:show="isShowModal" preset="card" :mask-closable="false" class="w-200">
    <NForm :model="createUserModel" :rules="formRules" label-placement="left" :label-width="80" ref="createForm">
      <NFormItem label="账号" path="username">
        <NInput v-model:value="createUserModel.username" placeholder="请输入账号" />
      </NFormItem>
      <NFormItem label="密码" path="password">
        <NInput type="password" v-model:value="createUserModel.password" placeholder="请输入密码" />
      </NFormItem>
      <NFormItem label="用户名" path="nickName">
        <NInput v-model:value="createUserModel.nickName" placeholder="请输入用户名" />
      </NFormItem>
      <NFormItem label="邮箱" path="email">
        <NInput v-model:value="createUserModel.email" placeholder="请输入邮箱" />
      </NFormItem>
      <NFormItem label="地址" path="address">
        <NInput v-model:value="createUserModel.address" placeholder="请输入地址" />
      </NFormItem>
      <NFormItem label="性别" path="gender">
        <NSelect v-model:value="createUserModel.gender" placeholder="请选择" :options="genderOptions"></NSelect>
      </NFormItem>
      <NFormItem label="头像" path="avatar"> </NFormItem>
      <div class="flex items-center justify-end gap-8">
        <NButton @click="handleReset">重置</NButton>
        <NButton type="primary" @click="handleSubmit">确认</NButton>
      </div>
    </NForm>
  </NModal>
</template>

<style lang="less" scoped></style>
